<template>
	<view class="order-page">
		<z-paging ref="paging" v-model="orderList" @query="queryList">
			<template #top>
				<view class="filter-header">
					<uni-search-bar v-model="keywords" @confirm="onSearch" @clear="onSearch" placeholder="订单号/客户名/收货人" :autoFocus="false" class="search-bar" />
					<view class="filter-btn" @click="openFilterModal">
						<uni-icons type="gear" size="18" color="#999" />
						<text class="btn-text">筛选</text>
					</view>
				</view>
			</template>

			<!-- 自定义空布局 -->
			<template #empty>
				<view class="empty-tip">暂无订单数据</view>
			</template>

			<!-- 订单卡片列表 -->
			<view class="order-cards">
				<view v-for="order in orderList" :key="order.orderId" class="order-card" @click="goDetails(order)">
					<component v-for="renderItem in renderConfig" :key="renderItem.slotName" :is="getComponent(renderItem.slotName)" v-bind="order" />
					<RemarkSlot :row="order" type="2" />
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 导入你之前定义的 6 个组件
import OrderRepeatInfo from '@/components/OrderRepeatInfo.vue';
import OrderLogisticsInfo from '@/components/OrderLogisticsInfo.vue';
import OrderDosageInfo from '@/components/OrderDosageInfo.vue';
import OrderAmountInfo from '@/components/OrderAmountInfo.vue';
import CustomerInfo from '@/components/CustomerInfo.vue';
import OrderProductInfo from '@/components/OrderProductInfo.vue';
import RemarkSlot from '@/components/RemarkSlot.vue';
// API
import { listRepeatPurchaseOrder, delRepeatPurchaseOrder } from '@/api/order/repeatPurchaseOrder';
import { navTo } from '../../common/utils';
import { removeNullAndUndefined } from '@/common/common.js';

// refs
const paging = ref();
const filterModalRef = ref();
const customerFollowUpRef = ref();
const platformAddOrderRef = ref();

// 数据
const orderList = ref<any[]>([]);
const keywords = ref('');
const filters = ref({});

// 渲染配置：决定哪些组件要显示，顺序如何
const renderConfig = [
	{ slotName: 'repeatOrderSlot' },
	{ slotName: 'repeatLogisticsSlot' },
	{ slotName: 'repeatDosageSlot' },
	{ slotName: 'repeatOrderAmountSlot' },
	// { slotName: 'customerSlot' },
	{ slotName: 'default' } // 商品信息
];

// 组件映射表
const componentsMap = {
	repeatOrderSlot: OrderRepeatInfo,
	repeatLogisticsSlot: OrderLogisticsInfo,
	repeatDosageSlot: OrderDosageInfo,
	repeatOrderAmountSlot: OrderAmountInfo,
	// customerSlot: CustomerInfo,
	default: OrderProductInfo
};

// 获取组件
const getComponent = (slotName: string) => {
	return componentsMap[slotName] || componentsMap.default;
};

// 查询列表
const queryList = async (pageNo: number, pageSize: number) => {
	const params = {
		pageNum: pageNo,
		size: pageSize,
		keywords: keywords.value,
		...filters.value
	};
	const res = await listRepeatPurchaseOrder(params);
	paging.value?.complete(res.rows || []);
};

// 搜索
const onSearch = () => {
	paging.value?.reload();
};

// 去详情页
const goDetails = (row: any) => {
	navTo({
		url: '/pages/orderDetails/reOrderDetails',
		_params: removeNullAndUndefined(row)
	});
};
</script>

<style lang="scss">
.order-page {
	min-height: 100vh;
	background-color: #f8f8f8;
}

.filter-header {
	display: flex;
	padding: 20rpx;
	background-color: #fff;
	border-bottom: 1px solid #eee;
}

.search-bar {
	flex: 1;
}

.filter-btn {
	display: flex;
	align-items: center;
	margin-left: 20rpx;
	padding: 0 20rpx;
	height: 60rpx;
	border: 1px solid #ddd;
	border-radius: 8rpx;
	background-color: #f5f5f5;
}

.btn-text {
	font-size: 24rpx;
	color: #666;
	margin-left: 8rpx;
}

.order-cards {
	padding: 20rpx;
}

.order-card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.empty-tip {
	text-align: center;
	color: #999;
	font-size: 28rpx;
	margin-top: 100rpx;
}
</style>
